<template>
	<van-tabbar v-model="selectedTab" fixed @change="onChange">
		<van-tabbar-item v-for="(item, i) in tabbarItems" :key="i" :icon="item.icon">{{ item.title }}</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				selectedTab: 0,
				tabbarItems: [{
						title: "首页",
						routeName: "home",
						icon: "home-o"
					},
					{
						title: "商品",
						routeName: "productList", // 修改为和路由配置一致的名称
						icon: "gift-o"
					},
					{
						title: "购物车",
						routeName: "shopcart",
						icon: "shopping-cart-o"
					},
					{
						title: "消息",
						routeName: "message",
						icon: "shopping-cart-o"
					},
					{
						title: "我的",
						routeName: "user",
						icon: "user-o"
					}
				]
			};
		},
		methods: {
			onChange(index) {
				this.$router.push({
						name: this.tabbarItems[index].routeName
					})
					.catch((error) => {
						console.error('路由跳转出错:', error);
					});
			}
		}
	};
</script>